<template>
  <div>
    <van-collapse v-model="activeName" border>
      <van-collapse-item title="setup代替了beforeCreate、created" name="1">
        <ul>
          <h4> setup 定义响应式数据</h4>

          <li> 1、ref单值
          </li>
          <li> 2、reactive对象   {{reactiveT}} {{reactiveT1}}
          </li>
          <li> 3、reactive对象+toRefs {{name}}

          </li>
          <li> 4、定义计算属性


          </li>
          <li> 5、定义watch
          </li>
          <li> 6、定义生命周期钩子函数
          </li>
          <h4> setup函数的注意点
          </h4>
          <li>
            1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods
            的变量和方法

          </li>
          <li>
            2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了
            undefined
          </li>
          <li>
            3、setup函数只能是同步的不能是异步的

          </li>
        </ul>
      </van-collapse-item>

    </van-collapse>
    <van-steps direction="vertical" :active="activeSteps">
      <van-step>
        <h3>onBeforeMount 挂载前</h3>
        <p>在挂载前被调用,$el为null</p>
      </van-step>

      <van-step>
        <h3>onMounted 挂载后</h3>
        <p>挂载完成后调用，$el初始化完</p>
      </van-step>
      <van-step>
        <h3>onBeforeUpdate 更新前</h3>
        <p>数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上</p>
      </van-step>
      <van-step>
        <h3>onUpdated 更新后</h3>
        <p>数据更新后调用，此时内存数据已经修改，页面数据也已经更新</p>
      </van-step>
    </van-steps>


    <p style="font-size: 12px">
      <van-button type="primary" size="small" @click="changeMessage">修改触发更新生命周期</van-button>
      修改的内容：{{ message }}
    </p>
    <van-collapse v-model="activeName1" border>
      <van-collapse-item title="onRenderTracked、onRenderTriggered是两个调试钩子。" name="1">
        <h5> 都带有一个debugger event，跟踪组件以及该操作的目标对象和键。
        </h5>
        <div>1、onRenderTracked，状态跟踪时调用，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象
        </div>
        <div>2、onRenderTriggered，状态触发时调用，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象
        </div>
        </van-collapse-item>
    </van-collapse>
    <p style="font-size: 12px">
      <van-button type="primary" size="small" @click="go">跳转</van-button>
      跳转会触发 onBeforeUnmount、onUnmounted （销毁的生命周期）
    </p>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onRenderTracked,
  onRenderTriggered,
  getCurrentInstance,
  ref,
  toRefs,
  reactive
} from 'vue';

export default {
  name: "liveFun",
  setup() {
    const {ctx} = getCurrentInstance();
    const activeName = ref([]);
    const activeName1 = ref([]);
    let activeSteps = ref("0");
    let message = ref("你好");
    let inputvalue = ref("");
    const collapse = ref(null);
    let timer = ref(null);
    let reactiveT = reactive({
      name:2
    });
    let reactiveT1 = reactive("reactive");
    const changeMessage = () => {
      message.value = "老铁";
      clearTimeout(timer.value);
      activeSteps.value = "2"

      timer.value = setTimeout(() => {
        activeSteps.value = "3"

      }, 2000)
    }
    onRenderTracked(() => {
      console.group('onRenderTracked ===============》');

    })

    onRenderTriggered(() => {
      console.group('onRenderTriggered ===============》');

    })
    onBeforeMount(() => {
      activeSteps.value = "0"
      console.group(' $el===============》',ctx.$el)
      console.group('onBeforeMount 挂载前===============》', activeSteps);
    })
    onMounted(() => {
      console.group(' $el===============》',ctx.$el)
      timer.value = setTimeout(() => {
        activeSteps.value = "1"

        console.group('onMounted 挂载后===============》', activeSteps);
        clearTimeout(timer.value);


      }, 2000)
    })
    onBeforeUpdate(() => {
      console.group('onBeforeUpdate 更新前 ===============》');

    })
    onUpdated(() => {

      console.group('onUpdated 更新后 ===============》');

    })
    onBeforeUnmount(() => {
      console.group('onBeforeUnmount 销毁前 ===============》');

    })
    onUnmounted(() => {
      console.group('onUnmounted 销毁后 ===============》');

    })


    const go = () => {
      ctx.$router.push({
        path: "/cart"
      })
    }

    return {
      message,
      changeMessage,
      go,
      inputvalue,
      activeName,
      activeName1,
      collapse,
      activeSteps,
      reactiveT,
      reactiveT1,
      ...toRefs(reactiveT),
    }
  }
}
</script>